<template>
  <div class="from">
    <div class="title">
      {{$t('ConNetwork_Networkinterconnection')}}
<!--      网络互联-->
    </div>
    <el-form :inline="true" class="demo-form-inline" size="small">
      <el-form-item :label="$t('ConNetwork_Jointhenetwork')" style="margin-left: 25px">
        <el-select v-model="network" :placeholder="$t('ConNetwork_Pleaseselectnetwork')">
          <el-option :label="item.Name" :value="item.Id" v-for="item in netList" :key="item.Id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button style="background: #067FB5; color: #fff;" @click="Submit">{{$t('ConNetwork_join')}}</el-button>
      </el-form-item>
    </el-form>
    <ConNetTable @removeSuccess="Success" v-if="item" :conId="item.Id" :netWorks="item.NetworkSettings.Networks"></ConNetTable>
  </div>
</template>

<script>
import post from '@/utils/post'
import ConNetTable from '@/components/conContent/ConNetTable' // 当前容器加入的网络列表table
export default {
  data () {
    return {
      netList: null, // 网络列表
      network: '' // 当前选中的网络
    }
  },
  props: ['item'], // 接受父组件穿过来的容器信息
  mounted () {
    // 请求网络列表
    const docker = 'curl --unix-socket /var/run/docker.sock -s "http:/v1.40/networks"' // 网络列表
    post({ docker }, res => {
      this.netList = res
    }, this)
  },
  methods: {
    // 加入网络
    Submit () {
      const data = {
        Container: this.item.Id
      }
      const docker = `curl -w %{http_code} --unix-socket /var/run/docker.sock -s -H Content-Type:application/json -d '${JSON.stringify(data)}' "http:/v1.40/networks/${this.network}/connect"` // 将容器连接到网络
      post({ docker }, res => {
        if (res >= 200 && res < 300) {
          this.$message({
            showClose: true,
            message: '网络连接成功！',
            type: 'success'
          })
          this.Success() // 成功时调用成功的方法
        } else {
          this.$message({
            showClose: true,
            message: '网络错误，请稍候重试！',
            type: 'error'
          })
        }
      }, this)
    },
    // 网络连接成功和移除网络成功时调用此方法给父组件传信，让父组件重新请求数据
    Success () {
      this.$emit('Success')
    }
  },
  components: {
    ConNetTable
  }
}
</script>

<style lang="scss" scoped>
.from{
  border: 1px solid #067FB5;
  border-radius: 15px;
  padding: 20px 10px 20px 10px;
  margin: 30px 0px;
  background: #F7FCFF;
  position: relative;
  .title{
    position: absolute;
    top: -14px;
    z-index: 10;
    left: 30px;
    font-size: 18px;
    font-weight: bold;
    background: #F7FCFF;
    padding: 0px 5px;
    border-radius: 5px;
  }
}
</style>
